<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>这是一个透明度动画</title>
</head>
<style type="text/css">
	#box{
		height: 100px;
		width: 100px;
		background-color: blue;
		filter:alpha(opacity:30);
	    opacity:0.3;	   
	}
	 p{
		font-size: 40px;
		color: red;
	}
</style>
<script type="text/javascript">
	window.onload=function(){
		var oBox=document.getElementById("box");
		oBox.onmouseover=function(){
			startMove(100);
		}
		oBox.onmouseout=function(){
			startMove(30);
		}
	}
	var timer=null;
	var alpha=30;
	function startMove (iTarget) {
		clearInterval(timer);
		var oBox=document.getElementById('box');
		timer=setInterval(function(){
			var speed=0;
			if(alpha>iTarget){
				speed=-10;
			}
			else{
				speed=10;
			}
			if(alpha==iTarget){
				clearInterval(timer);
			}else{
				alpha=alpha+speed;
				oBox.style.filter='alpha(opacity:'+alpha+')';
				oBox.style.opacity=alpha/100;
			}
		},30);
	}
</script>
<body>
	<div id="box"><p>心情愉快</p></div>
</body>
</html>